<template>
  <div v-if="actEndTime">
    <!--调用方法-->
    {{countDown(actEndTime)}}
    <!--动起来的小线条-->
    <!--<template v-for="device in allDevices " v-if="lineShow">-->
    <!--<div class="loader-inner line-scale-pulse-out-rapid"-->
    <!--:class="{'success':device.status === 0,'fail':device.status === 1,'null':device.status === 2 }">-->
    <!--<div></div>-->
    <!--<div></div>-->
    <!--<div></div>-->
    <!--<div></div>-->
    <!--<div></div>-->
    <!--<div></div>-->
    <!--<div></div>-->
    <!--</div>-->
    <!--</template>-->
    <template v-if="!lineShow">
      <el-tag size="normal" :type="status">{{countDownList}}</el-tag>
      <!--<Button v-show="!status" type="error" size="small" @click="click">{{countDownList}}</Button>-->
      <!--显示数据-->
    </template>

  </div>
</template>

<script>
export default {
  name: 'CountDown',
  props: {
    actEndTime: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      countDownList: 'Loading...',
      lineShow: true,
      status: 'success'
      // actEndTime: '2020-12-4 16:59:59',
    }
  },
  mounted () {
  },
  methods: {
    timeFormat (param) {
      return param < 10 ? '0' + param : param
    },
    newDate (str) {
      // 解决new Date()IE10不支持参数
      // 首先将日期分隔 ，获取到日期部分 和 时间部分
      if (str.length > 10) {
        let day = str.split(' ')
        // 获取日期部分的年月日
        let days = day[0].split('-')
        // 获取时间部分的 时分秒
        let mi = day[day.length - 1].split(':')
        // 获取当前date类型日期
        let date = new Date()
        // 给date赋值  年月日
        date.setUTCFullYear(days[0], days[1] - 1, days[2])
        // 给date赋值 时分秒  首先转换utc时区 ：+8
        date.setUTCHours(mi[0] - 8, mi[1], mi[2])
        return date
      } else {
        let day = str.split(' ')
        // 获取日期部分的年月日
        let days = day[0].split('-')
        // 获取时间部分的 时分秒
        let mi = ['00', '00', '00']
        // 获取当前date类型日期
        let date = new Date()
        // 给date赋值  年月日
        date.setUTCFullYear(days[0], days[1] - 1, days[2])
        // 给date赋值 时分秒  首先转换utc时区 ：+8
        date.setUTCHours(mi[0] - 8, mi[1], mi[2])
        return date
      }
    },
    countDown (val) {
      this.count(val)
      setInterval(() => this.count(val), 60000)
    },
    count (val) {
      let endTime = this.newDate(val).getTime()
      // 时间转成秒
      // 获取当前时间，同时得到活动结束时间数组
      let newTime = new Date().getTime()
      //   let newTime = this.startTime.getTime()
      // 对结束时间进行处理渲染到页面,兼容ie
      let obj = null
      // 如果活动未结束，对时间进行处理
      if (endTime - newTime > 0) {
        this.status = 'success'
        let time = (endTime - newTime) / 1000
        // 获取天、时、分、秒
        let day = parseInt(time / (60 * 60 * 24))
        let hou = parseInt(time % (60 * 60 * 24) / 3600)
        let min = parseInt(time % (60 * 60 * 24) % 3600 / 60)
        obj = {
          // day: this.timeFormat(day),
          day: day,
          hou: this.timeFormat(hou),
          min: this.timeFormat(min)
        }
        this.countDownList = obj.day + '天' + obj.hou + '时' + obj.min + '分'
      } else {
        this.status = 'danger'
        let time = (newTime - endTime) / 1000
        // 获取天、时、分、秒
        let day = parseInt(time / (60 * 60 * 24))
        let hou = parseInt(time % (60 * 60 * 24) / 3600)
        let min = parseInt(time % (60 * 60 * 24) % 3600 / 60)
        obj = {
          // day: this.timeFormat(day),
          day: day,
          hou: this.timeFormat(hou),
          min: this.timeFormat(min)
        }
        this.countDownList = obj.day + '天' + obj.hou + '时' + obj.min + '分'
        // 活动已结束，全部设置为'00'
        // obj = {
        //   day: '0',
        //   hou: '00',
        //   min: '00'
        // }
        // this.countDownList = '请尽快审核'
        // clearInterval(interval)
      }
      this.lineShow = false
    },
    countDown1 (val) {
      let endTime = this.newDate(val).getTime()
      // 时间转成秒
      var interval = setInterval(() => {
        // 获取当前时间，同时得到活动结束时间数组
        let newTime = new Date().getTime()
        //   let newTime = this.startTime.getTime()
        // 对结束时间进行处理渲染到页面,兼容ie
        let obj = null
        // 如果活动未结束，对时间进行处理
        if (endTime - newTime > 0) {
          let time = (endTime - newTime) / 1000
          // 获取天、时、分、秒
          let day = parseInt(time / (60 * 60 * 24))
          let hou = parseInt(time % (60 * 60 * 24) / 3600)
          let min = parseInt(time % (60 * 60 * 24) % 3600 / 60)
          let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60)
          obj = {
            // day: this.timeFormat(day),
            day: day,
            hou: this.timeFormat(hou),
            min: this.timeFormat(min),
            sec: this.timeFormat(sec)
          }
          this.countDownList = obj.day + '天' + obj.hou + '时' + obj.min + '分' + obj.sec + '秒'
        } else { // 活动已结束，全部设置为'00'
          obj = {
            day: '0',
            hou: '00',
            min: '00',
            sec: '00'
          }
          this.countDownList = '请尽快审核'
          clearInterval(interval)
        }
        this.lineShow = false
      }, 1000)
    }
  }
}
</script>

<style scoped>
/*.line-scale-pulse-out-rapid.success > div {*/
/*background-color: #4caf50;*/
/*}*/

/*.line-scale-pulse-out-rapid.null > div {*/
/*background-color: #f44336;*/
/*}*/

/*.line-scale-pulse-out-rapid.fail > div {*/
/*background-color: #ff9800;*/
/*}*/

/*.line-scale-pulse-out-rapid > div {*/
/*width: 2px;*/
/*height: 20px;*/
/*display: inline-block;*/
/*border-radius: 2px;*/
/*margin: 2px;*/
/*background-color: #fff;*/
/*vertical-align: middle;*/
/*-webkit-animation: line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11, .49, .38, .78);*/
/*animation: line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11, .49, .38, .78)*/
/*}*/

/*.line-scale-pulse-out-rapid > div:nth-child(2), .line-scale-pulse-out-rapid > div:nth-child(4), .line-scale-pulse-out-rapid > div:nth-child(6) {*/
/*-webkit-animation-delay: -.25s !important;*/
/*animation-delay: -.25s !important*/
/*}*/

/*.line-scale-pulse-out-rapid > div:nth-child(1), .line-scale-pulse-out-rapid > div:nth-child(7) {*/
/*-webkit-animation-delay: 0s !important;*/
/*animation-delay: 0s !important*/
/*}*/

/*@-webkit-keyframes line-scale-pulse-out-rapid {*/
/*0%, 90% {*/
/*-webkit-transform: scaley(1);*/
/*transform: scaley(1)*/
/*}*/
/*80% {*/
/*-webkit-transform: scaley(.3);*/
/*transform: scaley(.3)*/
/*}*/
/*}*/

/*@keyframes line-scale-pulse-out-rapid {*/
/*0%, 90% {*/
/*-webkit-transform: scaley(1);*/
/*transform: scaley(1)*/
/*}*/
/*80% {*/
/*-webkit-transform: scaley(.3);*/
/*transform: scaley(.3)*/
/*}*/
/*}*/
</style>
